<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目1-8月龄儿童健康检查记录表</span>
    </div>
    <el-form :model="form" label-width="140px" label-position="left" ref="formRef" :rules="formRules">
      <el-divider content-position="left">编号</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCardNo">
            <el-input v-model="form.idCardNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访日期" prop="followupDate">
            <el-date-picker
              v-model="form.followupDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="月龄">
            <el-select v-model="form.item" style="width: 100%">
              <el-option
                v-for="item in monthAge"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="体重">
            <el-row :gutter="20">
              <el-col :lg="11" :xl="11">
                <el-form-item  prop="weight">
                <el-input v-model="form.weight" placeholder="kg"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="11" :xl="11">
                <el-form-item  prop="weightSe">
                <el-radio-group v-model="form.weightSe" >
                  <el-radio  :label="1">上</el-radio>
                  <el-radio :label="2">中</el-radio>
                  <el-radio :label="3">下</el-radio>
                </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身长">
            <el-row :gutter="20">
              <el-col :lg="11" :xl="11">
                <el-form-item  prop="length">
                <el-input v-model="form.length" placeholder="cm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="11" :xl="11">
                <el-form-item  prop="lengthSe">
                <el-radio-group v-model="form.lengthSe">
                  <el-radio  :label="1">上</el-radio>
                  <el-radio :label="2">中</el-radio>
                  <el-radio :label="3">下</el-radio>
                </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="头围" prop="eadCircumference">
            <el-input
              v-model="form.eadCircumference"
              placeholder="cm"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-divider content-position="left">体格检查</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="面色">
<!--            <el-select v-model="form.bodyGridCheck.complexion" style="width: 100%">-->
<!--              <el-option-->
<!--                v-for="item in Complexion"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--              ></el-option>-->
<!--            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="皮肤">
            <el-select v-model="form.skin" style="width: 100%">
              <el-option
                v-for="item in skin"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="其他(面色)" v-if="[3].includes(form.Complexion)">
            <el-input v-model="form.ComplexionOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(皮肤)" v-if="[2].includes(form.skin)">
            <el-input v-model="form.skinContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="前囟">
            <el-row :gutter="20">
              <el-col :lg="9" :xl="9">
                <el-form-item prop="frontalSuture">
                <el-radio-group v-model="form.frontalSuture">
                  <el-radio  :label="1">闭合</el-radio>
                  <el-radio  :label="2">未闭合</el-radio>
                </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :lg="14" :xl="14">
                <el-row>
                  <el-col :lg="9" :xl="9">
                    <el-form-item prop="frontalSutureLength">
                    <el-input v-model="form.frontalSutureLength"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="3" :xl="3"> cm&nbsp;&nbsp;&nbsp;&nbsp;x </el-col>
                  <el-col :lg="9" :xl="9">
                    <el-form-item prop="frontalSutureWidth">
                    <el-input v-model="form.frontalSutureWidth"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="3" :xl="3"> cm </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="颈部包块">
            <el-select v-model="form.bodyGridCheck.neckMass" style="width: 100%">
              <el-option
                v-for="item in neck"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="眼睛">
            <el-select v-model="form.bodyGridCheck.eye" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="耳">
            <el-select v-model="form.bodyGridCheck.ear" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(眼睛)" v-if="[2].includes(form.eye)">
            <el-input v-model="form.eyeContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(耳)" v-if="[2].includes(form.ear)">
            <el-input v-model="form.earContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="口腔">
            <el-select v-model="form.bodyGridCheck.oralCavity" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="胸部">
            <el-select v-model="form.bodyGridCheck.chest" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(口腔)" v-if="[2].includes(form.oralCavity)">
            <el-input v-model="form.oralCavityContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(胸部)" v-if="[2].includes(form.chest)">
            <el-input v-model="form.chestContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="腹部">
            <el-select v-model="form.bodyGridCheck.abdomen" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="脐部">
            <el-select v-model="form.bodyGridCheck.umbilical" style="width: 100%">
              <el-option
                v-for="item in umbilicus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(腹部)" v-if="[2].includes(form.abdomen)">
            <el-input v-model="form.abdomenContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(脐部)" v-if="[4].includes(form.umbilicus)">
            <el-input v-model="form.umbilicusContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="四肢">
            <el-select v-model="form.bodyGridCheck.limbs" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="肛门">
            <el-select v-model="form.bodyGridCheck.nusExternalGenitalia" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(四肢)" v-if="[2].includes(form.limb)">
            <el-input v-model="form.limbContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(肛门)" v-if="[2].includes(form.anus)">
            <el-input v-model="form.anusContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="户外活动">
            <el-input
              v-model="form.outdoorActivity"
              placeholder="小时/日"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="服用维生素D">
            <el-input v-model="form.vitaminDTaking" placeholder="IU/日"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="两次随访间患病情况">
            <el-select
              v-model="form.twoFollowArr"
              multiple
              style="width: 100%"
              @change="seChange1"
            >
              <el-option
                v-for="item in twoFollow"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="(肺炎)" v-if="showPneumonia">
            <el-input v-model="form.illnessBetweenTwoFollowups.pneumoniaTimes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="(腹泻)" v-if="showDiarrhea">
            <el-input v-model="form.illnessBetweenTwoFollowups.diarrheaTimes"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="(外伤)" v-if="showTrauma">
            <el-input v-model="form.illnessBetweenTwoFollowups.raumaTimes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="(其他)" v-if="showOther">
            <el-input v-model="form.illnessBetweenTwoFollowups.others"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="指导">
            <el-select
              v-model="form.guide"
              multiple
              style="width: 100%"
              @change="seChange2"
            >
              <el-option
                v-for="item in guidance"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item
            label="其他(指导)"
            v-if="!(guidanceArr.indexOf(6) == -1)"
          >
            <el-input v-model="form.guidanceOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-divider content-position="left">转诊</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊有无">
            <el-select v-model="form.referral.conclusion" style="width: 100%">
              <el-option
                v-for="item in neck"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="原因" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.referral.reason"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊机构" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.referral.department"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊科室" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.referral.institutional"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊联系人" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.referral.contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item
            label="转诊联系方式"
            v-if="[1].includes(form.ifReferral)"
          >
            <el-input v-model="form.referral.ontactPhoneNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="结果">
            <el-select v-model="form.result" style="width: 100%">
              <el-option
                v-for="item in result"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="下次随访日期" prop="nextFollowupDate">
            <el-date-picker
              v-model="form.nextFollowupDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生">
            <el-input v-model="form.followDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="家长">
            <el-input v-model="form.parent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="家长签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-row type="flex" class="submitSty">
        <HButton type="add" @click="submit('formRef')">提交</HButton>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  monthAge,
  Complexion,
  skin,
  neck,
  eye,
  umbilicus,
  twoFollow,
  guidance,
  result,
  addOntToEight
} from "@/api/followForms/oneToEight";
import { add } from '@/api/formData'
import { IDValid, inputValidator,radioValidator } from '@/utils/validate'
import { addNewBorn } from '@/api/followForms/newborn'
export default {
  data() {
    return {
      formRules:{
        name: inputValidator,
        idCardNo: IDValid,
        weight:inputValidator,
        weightSe:radioValidator,
        length:inputValidator,
        lengthSe:radioValidator,
        eadCircumference:inputValidator,
        frontalSuture:radioValidator,
        frontalSutureLength:inputValidator,
        frontalSutureWidth:inputValidator,
        followupDate:inputValidator,
        nextFollowupDate:inputValidator
      },
      showPneumonia:false,
      showDiarrhea:false,
      showTrauma:false,
      showOther:false,
      form: {
        ifReferral: 1,
        bodyGridCheck:{
        },
        guide:[],
        twoFollowArr:[],
        referral:{}
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      twoFollowArr: [],
      guidanceArr: [],
      monthAge: monthAge,
      Complexion: Complexion,
      skin: skin,
      neck: neck,
      eye: eye,
      umbilicus: umbilicus,
      twoFollow: twoFollow,
      guidance: guidance,
      result: result,
    };
  },
  created() {},
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addOntToEight(this.form).then(res =>{
            if(res.code="AA000000"){
              this.$message.success(res.message);
              this.form={};
            }
          })
        } else {
          return false;
        }
      });

    },

    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //两次随访间患病情况选择
    seChange1(value) {
      this.form.twoFollowArr.forEach((item,index) =>{
        if(item == "肺炎"){
          this.showPneumonia=true
        }
        if(item == "腹泻"){
          this.showDiarrhea=true
        }
        if(item == "外伤"){
          this.showTrauma=true
        }
        if(item == "其他"){
          this.showOther=true
        }
        console.log("item===========",index)
      })
    },
    //指导选择
    seChange2(value) {
      this.form.guidance = this.guidanceArr.toString();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 30%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
